<template>
	<view class="container">
		<view style="width: 100%; text-align: center;height: 90upx;	position: fixed;z-index: 99; ">
			<scroll-view id="nav-bar" class="nav-bar" scroll-x>
				<view class="nav-item" :class="{'current': index === tabCurrentIndex}" @click="changeTab(index)" v-for="(item,index) in titleList">
					{{item.titleName}}
				</view>
			</scroll-view>
		</view>
		<scroll-view class="panel-scroll-box" scroll-y>
			<swiper id="swiper" class="swiper-box" :duration="300" :current="tabCurrentIndex" @change="changeTabSwiper">
				<swiper-item>
					<scroll-view scroll-y style="height: 100%;">
						<view class="bottom_box">
							<empty v-if="dataList.length == 0"></empty>
							<view style="width:100%;height:100%" v-else>
								<view class="news_box" v-for="(item,index) in dataList" @click="navToDetails(item)">
									<view class="news_img">
										<image :src="item.coverImageUrl || noPhoto" class="news_img"></image>
									</view>
									<view class="news-text">
										<view class="news_title">{{item.title}}</view>
										<view class="news_bottom">
											<view class="news_type">{{item.tagEntity && item.tagEntity.tagName}}</view>
											<view class="news_time">{{item.publishTime}}</view>
										</view>
									</view>
								</view>
								<uni-load-more :status="loadingType"></uni-load-more>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<scroll-view scroll-y style="height: 100%;">
						<view class="bottom_box">
							<empty v-if="dataList.length == 0"></empty>
							<view style="width:100%;height:100%" v-else>
								<view class="news_box" v-for="(item,index) in dataList" @click="navToDetails(item)">
									<view class="news_img">
										<image :src="item.coverImageUrl || noPhoto" class="news_img"></image>
									</view>
									<view class="news-text">
										<view class="news_title">{{item.title}}</view>
										<view class="news_bottom">
											<view class="news_type">{{item.tagEntity && item.tagEntity.tagName}}</view>
											<view class="news_time">{{item.publishTime}}</view>
										</view>
									</view>
								</view>
								<uni-load-more :status="loadingType"></uni-load-more>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<scroll-view scroll-y style="height: 100%;">
						<view class="bottom_box">
							<empty v-if="dataList.length == 0"></empty>
							<view style="width:100%;height:100%" v-else>
								<view class="news_box" v-for="(item,index) in dataList" @click="navToDetails(item)">
									<view class="news_img">
										<image :src="item.coverImageUrl || noPhoto" class="news_img"></image>
									</view>
									<view class="news-text">
										<view class="news_title">{{item.title}}</view>
										<view class="news_bottom">
											<view class="news_type">{{item.tagName}}</view>
											<view class="news_time">{{item.publishTime}}</view>
										</view>
									</view>
								</view>
								<uni-load-more :status="loadingType"></uni-load-more>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</scroll-view>
	</view>
</template>

<script>
	import empty from "@/components/empty";
	export default {
		data() {
			return {
				tagType: ['PARTY', 'TRANSPARENT', 'FINANCE'],
				dataList: [],
				titleList: [{
					titleName: "党务公开",
					thumb: "https://cdjjyl.com.cn/images/swgk/dwgk.png"
				}, {
					titleName: "政务公开",
					thumb: "https://cdjjyl.com.cn/images/swgk/zwgk.png"
				}, {
					titleName: "财务公开",
					thumb: "https://cdjjyl.com.cn/images/swgk/cwgk.png"
				}, ],
				tabCurrentIndex: 0,
				loadMoreType: "more",
				noPhoto: 'https://cdjjyl.com.cn/imageCollection/jiange/noPhoto.png',
				page: 1,
				areaCode: this.$api.util.getAreaCode(),
			}
		},
		components: {
			empty
		},
		onLoad() {
			this.initData(1)
		},
		onReachBottom() {
			if (this.loadingType == 'more') {
				this.page = this.page + 1;
				this.initData(this.page)
			}
		},
		methods: {
			initData(page) {
				let params = {
					"areaCode": this.areaCode,
					"articleType": this.tagType[this.tabCurrentIndex],
					"startIndex": page,
					"pageSize": "6",
					"published": true
				}
				this.$api.request.inquiryArticlePagination(params, (res) => {
					if (res.body.status.statusCode == "0") {
						this.dataList = this.dataList.concat(res.body.data.articles)
					}
					let total = res.body.data.totalCount
					if (this.dataList.length >= total) {
						this.loadingType = 'noMore'
					} else {
						this.loadingType = "more"
					}
				})
			},
			navToDetails(item) {
				uni.navigateTo({
					url: './details?dataUuid=' + item.articleUuid
				})
			},
			//tab切换
			changeTab(index) {
				this.tabCurrentIndex = index;
				this.clearData()
				this.initData(1)
			},
			changeTabSwiper(e) {
				this.tabCurrentIndex = e.detail.current;
			},
			clearData() {
				this.page = 1;
				this.dataList = [];
				this.loadingType = "more"
			}
		}
	}
</script>

<style scoped lang='scss'>
	page {
		background-color: #FBFBFB;
	}

	.container {
		width: 100%;
		background-color: #FBFBFB;
	}

	/* 顶部tabbar */
	.nav-bar {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		height: 90upx;
		white-space: nowrap;
		box-shadow: 0 2upx 8upx rgba(0, 0, 0, .06);
		background-color: #fff;

		.nav-item {
			display: inline-block;
			width: 250upx;
			height: 90upx;
			text-align: center;
			line-height: 90upx;
			font-size: 30upx;
			color: #303133;
			position: relative;

			&:after {
				content: '';
				width: 0;
				height: 0;
				border-bottom: 4upx solid rgba(85, 170, 255, 1.0);
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				transition: .3s;
			}
		}

		.current {
			color: rgba(85, 170, 255, 1.0);

			&:after {
				width: 50%;
			}
		}
	}

	.panel-scroll-box {
		height: calc(100% - 10upx);
		position: absolute;
		top: 100upx;
		z-index: 10;

		.panel-item {
			background: #fff;
			padding: 30px 0;
			border-bottom: 2px solid #000;
		}
	}

	.swiper-box {
		height: 100%;
	}

	.bottom_box {
		padding: 20upx;
	}

	.news_box {
		background: #FFFFFF;
		box-shadow: 2upx 2upx 22upx -2upx rgba(0, 0, 0, 0.1);
		border-radius: 10upx;
		height: 220upx;
		margin-bottom: 20upx;
		padding: 20upx;
		display: flex;
		justify-content: space-between
	}

	.news-text {
		width: 400upx;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between
	}

	.news_title {
		font-size: 28upx;
		overflow: hidden;
		max-height: 120upx;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	.news_bottom {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.news_type {
		font-size: 24upx;
		color: #999999;
	}

	.news_time {
		font-size: 24upx;
		color: #999999;
	}

	.news_img {
		width: 252upx;
		height: 188upx;
		border-radius: 8upx;
	}
</style>
